<template>
	<a-drawer
		class="look-auth-drawer"
		:width="720"
		:visible="showStatus"
		unmount-on-close
		:footer="false"
		@cancel="close"
		@close="closed"
	>
		<template #title> 查看权限 </template>
		<p class="look-auth-drawer__title">{{ roleTitle }}：</p>
		<a-table
			:columns="lookAuthDrawerColumns"
			:data="lookAuthDrawerData"
			:span-method="spanMethod"
			:bordered="{ wrapper: true, cell: true }"
			:pagination="false"
		>
			<template #auth="{ record }">
				<icon-check-circle-fill v-if="record.auth" class="auth_icon success_icon" />
				<icon-close-circle-fill v-else class="auth_icon error_icon" />
			</template>
		</a-table>
	</a-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, computed, Ref } from 'vue';
import { ROLE_MAP } from '@/constant/adminMap';
const roleType = ref<number>(0);
const roleTitle = computed(() => {
	return ROLE_MAP[roleType.value];
});
const lookAuthDrawerColumns: any = [
	{
		title: '模块',
		dataIndex: 'modular',
	},
	{
		title: '子模块',
		dataIndex: 'submodular',
	},
	{
		title: '功能权限',
		dataIndex: 'functionAuth',
	},
	{
		title: '权限',
		dataIndex: 'auth',
		slotName: 'auth',
	},
];
const lookAuthDrawerData = computed(() => {
	return [
		{
			modular: '首页',
			submodular: '首页',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '用户管理',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '用户管理',
			functionAuth: '新增',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '用户管理',
			functionAuth: '授权',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '授权管理',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '授权管理',
			functionAuth: '编辑备注/撤销授权',
			auth: true,
		},
		{
			modular: '用户/订单',
			submodular: '订单管理',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '审核管理',
			submodular: '发票管理',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '审核管理',
			submodular: '发票管理',
			functionAuth: '开票',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '提现审核',
			functionAuth: '查看/查询',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '提现审核',
			functionAuth: '审核操作',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '实名认证审核',
			functionAuth: '查看/查询',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '实名认证审核',
			functionAuth: '审核操作',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '内容审核',
			functionAuth: '账号只读权限',
			auth: true,
		},
		{
			modular: '审核管理',
			submodular: '内容审核',
			functionAuth: '账号操作权限',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '审核管理',
			submodular: '内容审核',
			functionAuth: '活动只读权限',
			auth: true,
		},
		{
			modular: '审核管理',
			submodular: '内容审核',
			functionAuth: '活动删除权限',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '数据报表',
			submodular: '数据概览',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '数据报表',
			submodular: '用户数据',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '数据报表',
			submodular: '活动数据',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '数据报表',
			submodular: '付费数据',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '数据报表',
			submodular: '流量数据',
			functionAuth: '查看/查询',
			auth: true,
		},
		{
			modular: '系统安全',
			submodular: '角色权限',
			functionAuth: '查看/查询',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '人员管理',
			functionAuth: '查看/查询',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '人员管理',
			functionAuth: '新增',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '人员管理',
			functionAuth: '删除',
			auth: [0].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '人员管理',
			functionAuth: '修改权限',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '人员管理',
			functionAuth: '账号开关',
			auth: [0, 1].includes(roleType.value),
		},
		{
			modular: '系统安全',
			submodular: '管理员操作日志',
			functionAuth: '查看/查询',
			auth: [0, 1].includes(roleType.value),
		},
	];
});
const modularRowArr: [] = reactive([]);
const modularPosition = ref(0);
const submodularRowArr: [] = reactive([]);
const submodularPosition = ref(0);
const initRowSpan = (
	targetData: Array<{ modular: string; submodular: string }>,
	targetArr: Array<number>,
	targetPost: Ref,
	targetVariable: 'modular' | 'submodular'
) => {
	targetData.forEach((it, i) => {
		if (i === 0) {
			targetArr.push(1);
			targetPost.value = 0;
			if (targetData[i][targetVariable] !== targetData[i + 1][targetVariable]) {
				targetArr.push(1);
				targetPost.value = 1;
			}
		} else {
			if (targetData[i + 1]) {
				if (targetData[i][targetVariable] === targetData[i + 1][targetVariable]) {
					targetArr[targetPost.value] += 1;
					targetArr.push(0);
				} else {
					targetArr.push(1);
					targetPost.value = i + 1;
				}
			} else {
				if (targetData[i][targetVariable] === targetData[i - 1][targetVariable]) {
					targetArr[targetPost.value + 1] += 1;
				} else {
					targetArr.push(1);
					targetPost.value = i;
				}
			}
		}
	});
};
initRowSpan(lookAuthDrawerData.value, modularRowArr, modularPosition, 'modular');
initRowSpan(lookAuthDrawerData.value, submodularRowArr, submodularPosition, 'submodular');
const spanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
	//  模块
	if (columnIndex === 0) {
		return { rowspan: modularRowArr[rowIndex], colspan: 1 };
	}
	//  子模块
	if (columnIndex === 1) {
		return { rowspan: submodularRowArr[rowIndex], colspan: 1 };
	}
	// return { rowspan: 0, colspan: 0 };
};
const showStatus = ref(false);
const show = (type: number) => {
	roleType.value = type;
	showStatus.value = true;
};
const close = () => {
	showStatus.value = false;
};
const closed = () => {
	roleType.value = 0;
};
defineExpose({
	show,
});
</script>

<style lang="less">
.look-auth-drawer {
	&__title {
		margin-bottom: 16px;
	}
	.auth_icon {
		font-size: 24px;
		fill: currentColor;
	}
	.success_icon {
		color: rgb(var(--green-6));
	}
	.error_icon {
		color: rgb(var(--red-6));
	}
}
</style>
